<template>
    <a-form-item :label="label" :name="formkey" :label-col="labelCol">
        <div class="FormView">
            <div class="IconBox" @click="ChooseColor">
                <input :id="'form_item_' + formkey" style="display: none;" />
                <RenderIcon :type="Value" />
                <span>{{ Value ? Value : '无' }}</span>
            </div>
            <a-button type="default" class="button" @click="Value = undefined">
                <template #icon>
                    <span class="C-Icon">&#xe679;</span>
                </template>
            </a-button>
            <a-button :type="Code ? 'primary' : 'default'" class="button" v-if="codeStatus">
                <template #icon>
                    <span class="C-Icon">&#xe6d5;</span>
                </template>
            </a-button>
        </div>
    </a-form-item>
</template>
<script setup>
import * as AllIcons from '@ant-design/icons-vue/lib/icons'
import { computed, inject, ref, h } from 'vue';
const props = defineProps(['label', 'code', 'disabled', 'codeStatus', 'labelWidth', 'formkey']);

const RenderIcon = function (props) {
    if (AllIcons[props.type]) {
        return h('div', { class: 'Icon' }, h(AllIcons[props.type]))
    } else {
        return
    }
}
RenderIcon.props = ['type'];

const SetChangeColorEvent = inject('SetChangeColorEvent', () => { });

const Value = defineModel('value');


const ChooseColor = function () {
    SetChangeColorEvent(Value.value, function (value) {
        Value.value = value
    })
}



const labelCol = computed(() => {
    if (props.labelWidth) {
        return { style: { width: props.labelWidth } }
    } else {
        return null
    }
});
</script>
<style scoped lang="less">
.IconBox {
    width: 100%;
    height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    cursor: pointer;
    line-height: 32px;
    border-radius: 4px;
    padding-left: 8px;

    &:hover {
        background-color: #f0f0f0;
    }

    .Icon {
        font-size: 16px;
        align-items: center;
        margin-right: 8px;
    }

    >span {
        user-select: text;
        display: inline-block;
        width: 100%;
        height: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>